<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>详情页</title>
    <link rel="stylesheet" type="text/css" href="css/top.css"/>
    <link rel="stylesheet" type="text/css" href="css/lunbo.css">
    <link rel="stylesheet" type="text/css" href="css/zhanshi.css">
    <link rel="stylesheet" type="text/css" href="css/footer.css">
    <script src="js/jquery-1.8.3.min.js"></script>
    <script src="js/public.js"></script>
</head>

<body>
<%@include file="includetop.jsp" %>

<!--内容开始-->
<div class="theshopshow" style="padding-top: 20px;">
    <!--left-->
    <!-- 帝云商品展示 -->
    <script src="js/163css.js"></script>
    <script src="js/lib.js"></script>
    <div id="preview">
        <div class=jqzoom id="spec-n1" onClick="window.open('/')">
            <IMG height="350" src="${pd.image }" jqimg="${pd.image }"
                 width="350">
        </div>
        <div id="spec-n5">
            <div class=control id="spec-left">
                <img src="img/left.gif"/>
            </div>
            <div id="spec-list">
                <ul class="list-h">
                    <li><img src="${pd.image }"></li>
                </ul>
            </div>
            <div class=control id="spec-right">
                <img src="img/right.gif"/>
            </div>
        </div>
    </div>
    <SCRIPT type=text/javascript>
        $(function () {
            $(".jqzoom").jqueryzoom({
                xzoom: 400,
                yzoom: 400,
                offset: 10,
                position: "right",
                preload: 1,
                lens: 1
            });
            $("#spec-list").jdMarquee({
                deriction: "left",
                width: 350,
                height: 56,
                step: 2,
                speed: 4,
                delay: 10,
                control: true,
                _front: "#spec-right",
                _back: "#spec-left"
            });
            $("#spec-list img").bind("mouseover", function () {
                var src = $(this).attr("src");
                $("#spec-n1 img").eq(0).attr({
                    src: src.replace("\/n5\/", "\/n1\/"),
                    jqimg: src.replace("\/n5\/", "\/n0\/")
                });
                $(this).css({
                    "border": "2px solid #ff6600",
                    "padding": "1px"
                });
            }).bind("mouseout", function () {
                $(this).css({
                    "border": "1px solid #ccc",
                    "padding": "2px"
                });
            });
        })
    </SCRIPT>
    <!-- 帝云商品展示 End -->
    <!--right-->
    <div class="shoppnum">
        <!--n1-->
        <form action="addDingdan" method="post">
            <div class="shanpmai" style="margin-left: 80px;">
                <h1 class="spdname" style="font-size: 18px; margin-top: 20px;">${pd.name }</h1>
                <div class="hotspeak" style="margin-top: 10px;">${pd.info}</div>
                <div class="hotspeak" style="margin-top: 10px; color: #71C671;">
                    全场免邮，满200-20,400-40，支持货到付款
                </div>
                <div class="shoujiap" style="margin-top: 20px;">
                    <span>超划算商品价格</span> <i>￥${pd.price }.00</i>
                </div>
                <!--购买数量-->
                <div class="goumaijiajian" style="margin-top: 20px;">
                    <span>购买数量</span> <input id="min" name="" type="button" value="-"
                     style="width: 30px; height: 30px; font-size: 12px; line-height: 30px; color: #333; float: left;
                    cursor: pointer">
                    <input readonly="readonly" id="text_box" name="count" type="text"
                           value="1"
                           style="width: 60px; height: 30px; font-size: 12px; text-align: center; float: left"/>
                    <input id="add" name="" type="button" value="+"
                     style="width: 30px; height: 30px; font-size: 12px; line-height: 30px; color: #333; float: left;
                    cursor: pointer">
                </div>
                <script>
                    $(document).ready(function () {
                        //获得文本框对象
                        var t = $("#text_box");
                        //初始化数量为1,并失效减
                        $('#min').attr('disabled', true);
                        //数量增加操作
                        $("#add").click(function () {
                            t.val(parseInt(t.val()) + 1)
                            if (parseInt(t.val()) != 1) {
                                $('#min').attr('disabled', false);
                            }
                        })
                        //数量减少操作
                        $("#min").click(function () {
                            t.val(parseInt(t.val()) - 1);
                            if (parseInt(t.val()) == 1) {
                                $('#min').attr('disabled', true);
                            }

                        })

                    });
                </script>
                <div class="peisongzhi" style="margin-top: 20px;">
                    <span>配送至</span>
                    <script src="js/city.js/cityJson.js"></script>
                    <script src="js/city.js/citySet.js"></script>
                    <script src="js/city.js/Popt.js"></script>
                    <div class="choosecity">
                        <input type="text" id="city" value="点击选择地区"
                         style="height: 20px; font-size: 12px; margin-top: 5px; border: 1px solid #cacace">
                        <script type="text/javascript">
                            $("#city").click(function (e) {
                                SelCity(this, e);
                            });
                        </script>
                    </div>
                    <span style="font-weight: bold; color: #333">有货</span> <a href="#">支持货到付款</a>
                </div>
                <!--加入购物车与收藏商品-->
                <input type="hidden" name="id" value="${pd.id }">
                <div class="joinspadsp" style="margin-top: 150px;">
                    <a style="margin-left: 67px">
                        <button type="submit"
                                style="border: none; background: transparent; color: white;">立即购买
                        </button>
                    </a>
                    <a href="addCart?id=${pd.id }" style="margin-left: 6px">加入购物车</a>
                    <c:choose>
                        <c:when test="${fcode==0}">
                            <a href="addFavorite?id=${pd.id}" style="margin-left: 6px">收藏商品</a>
                        </c:when>
                        <c:otherwise>
                            <a href="deleteFavorite?id=${pd.id}" style="margin-left: 6px">取消收藏</a>
                        </c:otherwise>
                    </c:choose>
                </div>

                <div class="chuxinxi" style="margin-top: 20px;">
                    <span>会员福利:</span><i>超划算赠您50元代金券噢！</i>
                </div>
            </div>
        </form>
        <!--商品编号-->
    </div>
</div>
<!--n2-->

<script>
    $(function () {
        var i = 0
        var size = $(".lklksp ul li").size()
        $(".shangfan").click(function () {
            i++
            if (i == size - 1) {
                i = 0;
            }
            $(".lklksp ul").animate({
                top: -i * 218
            })
        })
        $(".xiafan").click(function () {
            i--
            if (i == -1) {
                i = size - 2
            }
            $(".lklksp ul").animate({
                top: -i * 218
            })
        })
    })
</script>
</div>
</div>
<!--店长推荐-->

<!--商品介绍东西有点多-->
<div class="spjsmore">
    <!--左-->

    <!--右-->
    <div class="therightnrs">


        <!--大容器里面放若干内容-->
        <div class="drqlmfrgnr">
            <!--商品自诩-->
            <!--售后保障-->
            <div class="bigcakes c-3-1">
                <div class="bigcakes c-2-1">
                    <!--对该商品的综合评分-->

                    <!--评分结束-->

                    <!--这个容器里面放了全部评论、好评、中评、差评、-->

                </div>

            </div>
            <!--商品评价-->

        </div>

        <script>
            /*控制商品详情、商品评价、售后保障的出现或消失*/
            $(function () {
                $(".threespa ul li").mouseenter(
                    function () {
                        var frs = $(this).attr("mt-floors");
                        var cats = $(this).attr("mt-cts");
                        $(".c-" + frs + "-" + cats + "").show()
                            .siblings().hide();
                    })
                /*这个有点特殊*/
                $("#spencals1").mouseenter(function () {
                    $(".c-1-1").show();
                    $(".c-2-1").show();
                    $(".c-3-1").show();
                })
                /*$("#spencals2").mouseenter(function(){
                    $(".c-2-1").show();
                    $(".c-3-1").show();
                    })*/
                $("#spencals3").mouseenter(function () {
                    $(".c-3-1").show();
                    $(".c-2-1").show();
                })

                /*控制全部评论、好评、中评、差评的块的出现或消失*/
                $(".quanbupinglun a").click(
                    function () {
                        var frd = $(this).attr("mt-floord");
                        var catd = $(this).attr("mt-ctd");
                        $(".d-" + frd + "-" + catd + "").show()
                            .siblings().hide();
                    })
            })
        </script>
        <!--这里一切测试正常，现在我去掉容器里面各个div的颜色-->
    </div>

</div>
<!--页脚-->
<!--footer-->
<div class="footer" style="padding-bottom: 0px; margin-top: 200px;">
    <div class="box"
         style="width: 1800px; height: 270px; margin: 0 auto; text-align: center; padding: 0px; display: block;">

        <img src="img/timg.jpg" style="width: 450px; float: left;"> <img
            src="img/timg.jpg" style="width: 450px; float: left;"> <img
            src="img/timg.jpg" style="width: 450px; float: left;">
    </div>
</div>

</body>
</html>
